<template>
  <div class="app-container">
    <el-card style="width: 48%">
      <div style="border-bottom: 1px dashed #778899; margin-left: 10px;">
        <div style="margin-left: 60px; margin-bottom: 20px;font-weight: bold">基本信息</div>
      </div>
      <div style="margin-left: 60px; margin-top: 20px">
        <el-form ref="form" :model="form" size="small" label-width="80px">

          <el-form-item label="英语等级" prop="english">
            <el-input v-model="form.english" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="form.sex" style="width: 178px">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="居住地" prop="address">
            <el-input v-model="form.address" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="求职意向" prop="jobIntention">
            <el-input v-model="form.jobIntention" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="专业技能" prop="ability">
            <el-input v-model="form.ability" type="textarea" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="个人总结" prop="personalSummary">
            <el-input v-model="form.personalSummary" type="textarea" style="width: 370px;"/>
          </el-form-item>


        </el-form>
        <div style="margin-left: 10px">
          <el-button type="primary" @click="basicEvent">确认</el-button>
        </div>
      </div>
    </el-card>

    <el-card style="width: 48%; float: right; margin-top: -480px">
      <div style="border-bottom: 1px dashed #778899; margin-left: 10px;">
        <div style="margin-left: 60px; margin-bottom: 20px;font-weight: bold">教育经历</div>
      </div>
      <div style="margin-left: 60px; margin-top: 20px">
        <el-form ref="form" :model="eduForm" size="small" label-width="80px">
          <el-form-item label="学校名称" prop="nam">
            <el-input v-model="eduForm.name" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="专业" prop="professional">
            <el-input v-model="eduForm.professional" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="学历" prop="education">
            <el-select
              v-model="eduForm.education"
              clearable
              size="small"
              placeholder="请选择学历"
              class="filter-item"
              style="width: 190px"
              @change="crud.toQuery"
            >
              <el-option
                v-for="item in enabledTypeOptions"
                :key="item.key"
                :label="item.display_name"
                :value="item.key"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
              type="datetime"
              v-model="eduForm.startTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 370px;"
            />
          </el-form-item>

          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              type="datetime"
              v-model="eduForm.endTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 370px;"
            />
          </el-form-item>

          <el-form-item label="描述" prop="descriptions">
            <el-input v-model="eduForm.descriptions" type="textarea" style="width: 370px;"/>
          </el-form-item>

        </el-form>
        <div style="margin-left: 10px">
          <el-button v-if="basicId" type="primary" @click="eduEvent">确认</el-button>
        </div>
      </div>
    </el-card>

    <el-card style="width: 48%; margin-top: 20px">
      <div style="border-bottom: 1px dashed #778899; margin-left: 10px;">
        <div style="margin-left: 60px; margin-bottom: 20px;font-weight: bold">实习经历</div>
      </div>
      <div style="margin-left: 60px; margin-top: 20px">
        <el-form ref="form" :model="form" size="small" label-width="80px">
          <el-form-item label="公司名称" prop="nam">
            <el-input v-model="expForm.name" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="职位" prop="job">
            <el-input v-model="expForm.job" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
              type="datetime"
              v-model="expForm.startTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 370px;"
            />
          </el-form-item>

          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              type="datetime"
              v-model="expForm.endTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 370px;"
            />
          </el-form-item>

          <el-form-item label="工作描述" prop="performance">
            <el-input v-model="expForm.performance" type="textarea" style="width: 370px;"/>
          </el-form-item>

        </el-form>
        <div style="margin-left: 10px">
          <el-button v-if="basicId" type="primary" @click="expEvent">确认</el-button>
        </div>
      </div>
    </el-card>

    <el-card style="width: 48%; float: right; margin-top: -460px">
      <div style="border-bottom: 1px dashed #778899; margin-left: 10px;">
        <div style="margin-left: 60px; margin-bottom: 20px;font-weight: bold">工作经历</div>
      </div>
      <div style="margin-left: 60px; margin-top: 20px">
        <el-form ref="form" :model="proForm" size="small" label-width="80px">
          <el-form-item label="项目名称" prop="nam">
            <el-input v-model="proForm.name" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
              type="datetime"
              v-model="proForm.startTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 370px;"
            />
          </el-form-item>

          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              type="datetime"
              v-model="proForm.endTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 370px;"
            />
          </el-form-item>

          <el-form-item label="项目背景" prop="background">
            <el-input v-model="proForm.background" type="textarea" style="width: 370px;"/>
          </el-form-item>

          <el-form-item label="项目描述" prop="performance">
            <el-input v-model="proForm.performance" type="textarea" style="width: 370px;"/>
          </el-form-item>

        </el-form>
        <div style="margin-left: 10px">
          <el-button v-if="basicId" type="primary" @click="proEvent">确认</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import { save, getResmue, saveExp, saveEdu, savePro } from '@/api/ceamResume'

import crudCompany from '@/api/ceamCompany'
import eHeader from './header'
import CRUD, { presenter, form } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'

// crud交由presenter持有
const crud = CRUD({
  title: '我的企业',
  url: 'api/company',
  sort: ['sort,asc', 'id,desc'],
  crudMethod: { ...crudCompany }
})
const defaultForm = { name: null, count: null, img: '',  carType: { id: null } }
export default {
  components: { eHeader, crudOperation, pagination, udOperation },
  mixins: [presenter(crud),form(defaultForm)],
  data() {
    return {
      proForm: {},
      expForm: {},
      eduForm: {},
      enabledTypeOptions: [
        { key: 0, display_name: '高中' },
        { key: 1, display_name: '专科' },
        { key: 2, display_name: '本科' },
        { key: 3, display_name: '硕士' },
        { key: 4, display_name: '博士' }
      ],
      basicId: undefined,
      headers: {
        'Authorization': getToken()
      },
      delLoading: false,
      permission: {
        add: ['admin', 'carInfo:add'],
        edit: ['admin', 'carInfo:edit'],
        del: ['admin', 'carInfo:del']
      }
    }
  },
  created() {
    this.loadResume();
    // this.$nextTick(() => {
    //   this.init()
    // })
  },
  computed: {
    ...mapGetters([
      'uploadImgApi',
      'baseApi'
    ])
  },
  methods: {
    checkPermission,
    loadResume() {
      getResmue().then(res =>{
        this.basicId = res.id;
        this.form.id = res.id;
        this.form = res;
        this.eduForm = res.edu;
        this.eduForm.id = res.edu.id;
        this.expForm = res.exp;
        this.expForm.id = res.exp.id;
        this.proForm = res.pro;
        this.proForm.id = res.pro.id;
      })
    },
    basicEvent() {
      save(this.form).then(res => {
        console.log('res=66=', res)
        this.basicId = res.id;
        this.form.id = res.id;
        this.$notify({
          title: '成功',
          type: 'success',
          duration: 2500
        })
      }).catch(error => {
        this.$notify({
          title: '失败',
          type: 'danger',
          duration: 2500
        })
      })
    },
    basicEvent() {
      save(this.form).then(res => {
        console.log('res=66=', res)
        this.basicId = res.id;
        this.form.id = res.id;
        this.$notify({
          title: '成功',
          type: 'success',
          duration: 2500
        })
      }).catch(error => {
        this.$notify({
          title: '失败',
          type: 'danger',
          duration: 2500
        })
      })
    },
    basicEvent() {
      save(this.form).then(res => {
        console.log('res=66=', res)
        this.basicId = res.id;
        this.form.id = res.id;
        this.$notify({
          title: '成功',
          type: 'success',
          duration: 2500
        })
      }).catch(error => {
        this.$notify({
          title: '失败',
          type: 'danger',
          duration: 2500
        })
      })
    },
    eduEvent() {
      this.eduForm.resumeId = this.basicId;
      saveEdu(this.eduForm).then(res => {
        console.log('res=66edu=', res)
        this.eduForm.id = res.id;
        this.$notify({
          title: '成功',
          type: 'success',
          duration: 2500
        })
      }).catch(error => {
        this.$notify({
          title: '失败',
          type: 'danger',
          duration: 2500
        })
      })
    },
    expEvent() {
      this.expForm.resumeId = this.basicId;
      saveExp(this.expForm).then(res => {
        console.log('res=66exp=', res)
        this.expForm.id = res.id;
        this.$notify({
          title: '成功',
          type: 'success',
          duration: 2500
        })
      }).catch(error => {
        this.$notify({
          title: '失败',
          type: 'danger',
          duration: 2500
        })
      })
    },
    proEvent() {
      this.proForm.resumeId = this.basicId;
      savePro(this.proForm).then(res => {
        console.log('res=66pro=', res)
        this.proForm.id = res.id;
        this.$notify({
          title: '成功',
          type: 'success',
          duration: 2500
        })
      }).catch(error => {
        this.$notify({
          title: '失败',
          type: 'danger',
          duration: 2500
        })
      })
    },
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {

    },
    // 打开编辑弹窗前做的操作
    [CRUD.HOOK.beforeToEdit](crud, form) {

    }
  }
}
</script>

<style scoped>
  .avatar-uploader  {
    width: 160px;
    height: 120px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>
